<template>
    <div>
        <div class="shopcartBox">
            <!-- 购物车头部 -->
            <div class="shopcartTitle">
                <div class="GoOut" @click="goshopcart">&lt;</div>
                <div class="GoOutHome" @click="goHome">
                    <img src="../../assets/首页111 .png" alt="">
                </div>
                <div class="GoOutName">购物车</div>
            </div>
            <!-- 购物车商品列表 -->
            <div class="shopcartList">
                <!-- 我的购物车 -->
                <div class="shopMycart">
                    <div class="myCart">我的购物车</div>
                    <div class="myCartEdit" @click="cartUpdata" v-show="cartup">编辑</div>
                    <div class="myCartYes" @click="cartYes" v-show="cartyes">完成</div>
                </div>
                <!-- 列表 -->
                <div class="shopMyList">
                    <div class="shopMyLi">
                        <input type="radio">
                        <img src="../../assets/微信图片_20241124195218.jpg" alt="">
                        <div class="liText">
                            <div class="liTextName">i-inter</div>
                            <div class="liTextPrice">￥3999</div>
                            <div class="liTextCount">
                                <div class="textCountdet">配置详情</div>
                                <div class="textCountDIY">继续DIY</div>
                                <div class="countAddCut" v-show="addcutDis">
                                    <button class="countCut" v-on:click="cut()">-</button>
                                    <div class="countCount"><input type="text" v-model="count"></div>
                                    <button class="countAdd" v-on:click="add()">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 购物车 -->
                <div class="shopCart">
                    <div class="inpAll">
                        <input type="radio">
                        <div>全选</div>
                    </div>
                    <div class="shopCartTotal">
                        <div class="cartTotal" v-show="cartTot">
                            <div class="totalText">合计:</div>
                            <div class="totalPrice">￥0</div>
                        </div>
                        <div class="cartGoShop">
                            <button v-show="goshop">去支付</button>
                            <button v-show="goNo">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <btn1></btn1>
    </div>
</template>
<script>
import btn1 from "../../components/botButton.vue"
export default {
    data() {
        return {
            count: 0,
            addcutDis: true,
            cartup: true,
            cartyes: false,
            cartTot: true,
            goshop: true,
            goNo: false
        }
    },
    components: {
        btn1
    },
    methods: {
        goshopcart() {
            this.$router.push("/shopcart").catch((err) => err);
        },
        goHome() {
            this.$router.push('/home').catch((err) => err)
        },
        add(count) {
            this.count++
        },
        cut(count) {
            if (this.count <= 0) {
                alert('受不了啦，宝贝不能再减少啦')
                this.count = 0;
            } else {
                this.count -= 1;
            }
        },
        cartUpdata() {
            this.addcutDis = !this.addcutDis
            this.cartyes = !this.cartyes
            this.cartup = !this.cartup
            this.cartTot = !this.cartTot
            this.goshop = !this.goshop
            this.goNo = !this.goNo
        },
        cartYes() {
            this.cartyes = !this.cartyes
            this.cartup = !this.cartup
            this.addcutDis = !this.addcutDis
            this.cartTot = !this.cartTot
            this.goshop = !this.goshop
            this.goNo = !this.goNo
        }
    }
}
</script>
<style lang="scss" scoped>
.shopcartBox {
    width: 100%;
    height: 10rem;
    padding: 0;

    // 购物车头部
    .shopcartTitle {
        height: 0.6rem;
        background: #fff;
        display: flex;

        .GoOut {
            width: 0.4rem;
            height: 0.4rem;
            border-right: 0.01rem solid #ccc;
            margin: 0 0.2rem;
            font-size: 0.4rem;
            line-height: 0.4rem;
        }

        .GoOutHome {
            img {
                width: 0.4rem;
                height: 0.4rem;
            }
        }

        .GoOutName {
            margin-left: 2rem;
            font-size: 0.3rem;
        }
    }

    // 购物车列表
    .shopcartList {

        // 我的购物车
        .shopMycart {
            display: flex;
            border-bottom: 0.05rem solid #333;
            margin-top: 0.1rem;
            height: 0.6rem;
            width: 100%;
            justify-content: space-between;

            .myCart {
                font-size: 0.3rem;
                font-weight: bold;
            }

            .myCartEdit {
                font-size: 0.3rem;
            }

            .myCartYes {
                font-size: 0.3rem;
            }
        }

        // 列表
        .shopMyList {
            margin-top: 0.2rem;

            .shopMyLi {
                width: 100%;
                height: 1.5rem;
                // background: #eee;
                padding: 0.2rem 0;
                display: flex;
                margin-bottom: 0.2rem;
                border: 0.01rem solid #999;
                border-radius: 0.1rem;

                img {
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: 0.3rem;
                }

                .liText {
                    .liTextName {
                        margin-bottom: 0.15rem;
                    }

                    .liTextPrice {
                        color: rgb(251, 157, 89);
                        margin-bottom: 0.15rem;
                    }

                    .liTextCount {
                        display: flex;

                        .textCountdet {
                            color: #999;
                            margin-right: 0.1rem;
                            width: 1.3rem;
                        }

                        .textCountDIY {
                            color: blue;
                            // margin-right: 0.4rem;
                            width: 1.2rem;
                        }

                        .countAddCut {
                            display: flex;

                            .countCut {
                                width: 0.8rem;
                                height: 0.5rem;
                                color: #999;
                                background: #fff;
                                border: none;
                                font-size: 0.8rem;
                                line-height: 0.5rem;
                            }

                            .countCount {
                                font-size: 0.3rem;
                                line-height: 0.5rem;
                                margin: 0 0.1rem;
                                background: #fff;

                                input {
                                    width: 0.4rem;
                                    height: 0.4rem;
                                    text-align: center;
                                    background: #fff;
                                    border: none;
                                }
                            }

                            .countAdd {
                                width: 0.8rem;
                                height: 0.5rem;
                                color: rgb(251, 157, 89);
                                background: #fff;
                                border: none;
                                font-size: 0.8rem;
                                line-height: 0.5rem;
                            }
                        }
                    }
                }
            }
        }

        .shopCart {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 1.4rem;
            // background: red;
            position: fixed;
            bottom: 1rem;

            // left: 0.2rem;
            .inpAll {
                display: flex;
                margin-top: 0.7rem;

                input {
                    width: 0.3rem;
                    height: 0.3rem;
                }

                div {
                    font-weight: bold;
                    font-size: 0.28rem;
                }
            }

            .shopCartTotal {
                width: 3.8rem;
                // justify-content: space-between;
                margin-top: 0.5rem;

                .cartTotal {
                    width: 1.3rem;
                    margin-top: 0.2rem;
                    display: flex;

                    .totalText {
                        margin-top: 0.04rem;
                    }

                    .totalPrice {
                        font-size: 0.28rem;
                        color: rgb(250, 94, 46);
                        margin-left: 0.2rem;
                    }
                }

                .cartGoShop {
                    position: absolute;
                    bottom: 0.1rem;
                    right: 0.2rem;

                    button {
                        width: 2rem;
                        height: 0.8rem;
                        border-radius: 0.5rem;
                        background: #fff;
                        border: 0.01rem solid #ccc;
                        margin-left: 0.3rem;
                    }
                }

                display: flex;
            }
        }
    }
}
</style>